<template>
  <h2>🏠欢迎发布问题、经验、简报等内容</h2>
  <div class="home-container">
    <div class="input-wrapper">
      <el-input
        v-model="input"
        type="textarea"
        :rows="5"
        placeholder="输入你的想法，或搜索已有内容..."
        clearable
        @keydown.ctrl.enter="confirmPublish"
        class="custom-scrollbar"
      />
      <!-- 发布按钮放在输入框内部右下角 -->
      <el-button class="publish-btn" type="primary" @click="confirmPublish">
        发布
      </el-button>
    </div>

    <ContentList :items="filteredContent" />
  </div>
</template>


<script setup>
import { ref, onMounted} from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import { publishContent } from '@/api/content'

const input = ref('')
const filteredContent = ref([]) // 示例：你可以替换为实际内容数据

// 确认发布
function confirmPublish() {
  if (!input.value.trim()) {
    ElMessage.warning('请输入内容')
    return
  }

  ElMessageBox.confirm(
    '确认发布这条内容吗？',
    '发布确认',
    {
      confirmButtonText: '发布',
      cancelButtonText: '取消',
      type: 'info',
    }
  ).then(() => {
    handlePublish()
  }).catch(() => {
    // 用户取消，不做任何操作
  })
}

// 真正执行发布
async function handlePublish() {
  try {
    await publishContent(input.value)
    ElMessage.success('发布成功')
    input.value = ''
    // 重新加载列表等操作
  } catch (error) {
    ElMessage.error('发布失败')
  }
}

onMounted(() => { 
  document.title = '首页@HuLuSpace';
})

</script>

<style scoped>
.home-container {
  max-width: 1000px;
  margin: 0 auto;
}

.input-wrapper {
  position: relative;
  margin-bottom: 24px; /* 让输入框和内容列表之间有间距 */
}

.publish-btn {
  position: absolute;
  bottom: 10px;
  right: 10px;
  z-index: 1;
}

/* 针对 Webkit 浏览器（Chrome、Edge、Safari） */
.custom-scrollbar ::-webkit-scrollbar {
  width: 4px;              /* 设置滚动条宽度为 4px */
}
.custom-scrollbar ::-webkit-scrollbar-thumb {
  background-color: #c1c1c1;   /* 设置滚动条滑块颜色 */
  border-radius: 2px;
}
.custom-scrollbar ::-webkit-scrollbar-track {
  background-color: transparent;
}
</style>
